<template>
  <div class="box_home">
    <Header class="iscolor" />
    <div class="headerimg">
    <div class="cell">
      <p @click="cell">{{quarters}}</p>
      <img @click="old_setup" class="gear" src="@/assets/gear.png">
    </div>
    <mt-swipe :auto="4000">
      <mt-swipe-item><img src="@/assets/6.png" alt="" /></mt-swipe-item>
      <mt-swipe-item><img src="@/assets/5.png" alt="" /></mt-swipe-item>
    </mt-swipe>
    </div>
    <div class="nav">
      <ul>
        <router-link tag="li" to="/approval">
          <img class="house" src="@/assets/icon_house@3x.png" alt="" />
          <p class="old">房屋认证</p>
        </router-link>
        <router-link tag="li" to="/manage">
          <img class="house" src="@/assets/icon_houseonthehand@3x.png" alt="" />
          <p class="old">房屋管理</p>
        </router-link>
        <router-link tag="li" to="/statistic">
          <img class="house" src="@/assets/icon_Shape@3x.png" alt="" />
          <p class="old">数据统计</p>
        </router-link>
        <li @click="notice">
          <img class="house" src="@/assets/icon_horn@3x.png" alt="" />
          <p class="old">通知公告</p>
        </li>
        <router-link tag="li" to="/trouble">
          <img class="house" src="@/assets/icon_repair@3x.png" alt="" />
          <p class="old">房屋报修</p>
        </router-link>
        <router-link tag="li" to="/access">
          <img class="house" src="@/assets/icon_key@3x.png" alt="" />
          <p class="old">门禁记录</p>
        </router-link>
      </ul>
    </div>
    <router-link tag="div" to="/key" class="lock">
      <img class="locks" src="@/assets/icon_lock_big@3x.png" alt="">
    </router-link>
    <router-view></router-view>         <!-- 配置了子路由需要在当前页面添加一个坑 -->
  </div>
</template>
<script>
// @ is an alias to /src
import Header from "../components/header";

export default {
  name: "home",
  data(){
    return{
      quarters:'请选择小区',
    }
  },
  components: {
    Header
  },
  methods:{
    cell(){                       //跳转单元列表
      this.$router.push('/cell');
    },
    old_setup(){
      this.$router.push('/setup');
    },
    notice(){
      this.$router.push('/notice');
    },
    unit(){
      let that = this;
      if(that.$store.state.unit === ''){
        that.$store.commit('login',that.wrapper.getlocalstoage('item'))
        // console.log(that.$store.state.blockid + that.$store.state.unit)
      }
    }
  },
  created(){
    let that = this;
    if(that.$store.state.unit){       //使用vuex后刷新会使state中的数据清空  在这里判断state为空就重新给他赋值
      that.quarters = that.$store.state.unit;                       //弥补了刷新后state中数据的丢失
    }
    if(that.$store.state.unit === ''){
      // that.unit();
      that.wrapper.displace(that.$store.state.unit,'login','item',that);
    }
  },
  activated(){    //一进入页面就触发 在这里设置这个钩子是为了处理返回上一页时刷新
    this.quarters = this.$store.state.unit;
  }
};
</script>
<style scoped>
.text {
  height: 30px;
  line-height: 30px;
  width: 100%;
  text-align: center;
  color: white;
  background: #00ade1;
  margin:0;
  padding: 0;
}
.iscolor{
  background: linear-gradient(to bottom, #00ade1, #12ade7) !important;
}
.headerimg{
  width: 100%;
  height: 230px;
}
.mint-swipe-item {
  line-height: 200px;
}
.headerimg img{
  width: 100%;
  height: 230px;
}
.cell{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
   background: #00ade1;
   position: relative;
   color: white;
   margin-top: 50px;
}
.cell .gear{
  width:22px;
  height: 22px;
  position: absolute;
  right: 15px;
}
.nav{
  width: 100%;
  margin-top: 13%;
}
.nav ul{
  /* float: left;
  width: 33%;
  height: 100px;
  margin-top: 25px;*/
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.nav li{
  width:33%;
  text-align: center;
  margin-bottom: 20px;
}
.nav .house{
  height: 60px;
  /* padding-left: 25%; */
  padding-top: 10%;
}
.nav p{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
/* .nav .old{
  width: 70px;
} */
.lock{
  /* margin-top: 40px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center; */
  position: fixed;
  bottom: 10px;
  transform: translateX(-50%);
  left: 50%;
}
.locks{
   width: 70px;
  height: 70px;
}
</style>